<template>
  <div class="navtop">
    <img class="rightimg" src="../../assets/logo.svg" alt="logo" />
    <div class="navtopright">
      <div class="imgborder">
        <img src="../../assets/list/search.svg" alt="" />
      </div>
      <div class="imgborder">
        <img src="../../assets/list/set.svg" alt="" />
      </div>
      <div class="userlogo">
        <img src="../../assets/list/tx.svg" alt="" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";
export default class NavTop extends Vue {}
</script>

<style lang="less" scoped>
.navtop {
  width: 100%;
  height: 0.6rem;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: space-between;
  .rightimg {
    width: 1.31rem;
    height: 0.26rem;
    margin-left: 0.16rem;
    margin-top: 0.168rem;
    border: 1px dashed #adafb3;
  }
  .navtopright {
    width: 1.45rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .imgborder {
      width: 0.32rem;
      height: 0.32rem;
      border-radius: 50%;
      border: 1px solid #f4f6f8;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        border: 1px dashed #adafb3;
        width: 0.18rem;
        height: 0.18rem;
      }
    }
    .userlogo {
      img {
        border: 1px dashed #adafb3;
        width: 0.32rem;
        height: 0.32rem;
      }
    }
  }
}
</style>